<script setup lang="ts">
// ohpm i axios
// npm i axios
import { useChannelStore } from '@/stores/channel'
import type { ChannelResData, ChannelItem } from '@/types/data'
import axios from 'axios'
import { onMounted, ref } from 'vue'

/**
 * 1. 发请求：onMounted
 * 2. 获取导数据之后设置给状态变量
 *    定义状态变量
 *    赋值
 * 3. v-for 替换为真实的数据即可
 * */

const channels = ref<ChannelItem[]>([])

onMounted(async () => {
  // axios ts 中使用如果不通过泛型设置类型
  // 依旧是 any
  const res = await axios<ChannelResData>({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  // console.log(res.data.data.channels)
  channels.value = res.data.data.channels
})

// 2. 定义 props
// defineProps<{
//   channelId: number
// }>()
// // 3. 定义 emit 并且点击触发
// const emit = defineEmits<{
//   (e: 'changeId', newId: number): void
// }>()

// 频道 id 替换为 通过 pinia 获取
const store = useChannelStore()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!-- 父组件传递过来的频道 id 和当前项的频道 id 相同 -->
      <a
        class="item"
        :class="{ active: store.channel === item.id }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
        @click="store.changeChannel(item.id)"
      >
        <!-- 推荐{{ item }} -->
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
